<template>
  <div class="bunding color-9 unified-bg">
    <div class="main">
           <ul class="main-ul">
             <li class="li1">
               <div class="li1-top1">
                 <p>设备序列号 <span class="set">{{deviceSN}}</span></p>
               </div>
               <div class="li1-top2">
                 <p>厂家 <span class="set">{{ factory}}</span></p>
                 <p>设备型号 <span class="set">{{type}}</span></p>
               </div>
             </li>
             <li class="li2">
               <p class="li2-c1">当前位置</p>
               <p class="p-c-d"><span>{{province}}</span><span>{{city}}</span><span>{{district}}</span></p>
               <div class="li2-c3">
                 <input type="text" class="address" v-model="dizhi"/>
                 <p>
                   <i class="icon iconfont">&#xe63c;</i>
                   <router-link to="/getCoords" class="color-2f">手动定位</router-link>
                 </p>
               </div>
             </li>
             <li class="li3">
               <div class="weui-cells__title">设备备注</div>
               <div class="weui-cells weui-cells_form">
                 <div class="weui-cell">
                   <div class="weui-cell__bd">
                     <textarea class="weui-textarea" placeholder="请输入" rows="3" v-model="remark" maxlength="200"></textarea>
                     <div class="weui-textarea-counter"><span>{{remark.length}}</span>/200</div>
                   </div>
                 </div>
               </div>
               <div v-if="!isBinding" class="btn-box" @click="binding()">
                 <a href="javascript:;" class="weui-btn weui-btn_primary">确认绑定</a>
               </div>
               <div v-else-if="isBinding" class="btn-box">
                 <router-link  class="weui-btn weui-btn_primary" :to='`/price?model=${type}`'>设置程序价格</router-link>
               </div>
               <p class="last-p">
               </p>
             </li>
           </ul>
       </div>
    <div id="loadingToast" v-if="loadingStatus">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">定位中,请稍后</p>
      </div>
    </div>
  </div>
</template>
<script>
  import * as api from 'api'
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        loadingStatus: false,
        remark: '',     // 备注
        accuracy: '',   // 纬度
        altitude: '0',   // 海拔
        factory: '',    // 厂家
        type: '',       // 类型
        deviceSN: '',   // 设备SN
        moduleSN: '',    // 模组SN
        isBinding: false    // 是否绑定
      }
    },

    computed: {
      ...mapState({
        agencyId: state => state.userInfo.id,
        district: state => state.userInfo.address.addressComponent.district,
        city: state => state.userInfo.address.addressComponent.city,
        province: state => state.userInfo.address.addressComponent.province,
        streetNumber: state => state.userInfo.address.addressComponent.streetNumber,
        longitude: state => state.userInfo.address.location.lng,
        latitude: state => state.userInfo.address.location.lat
      })
    },

    created () {
      this.$store.dispatch('updateOpenId', this.$route.params.openId);
      this.factory = this.$route.params.factory;   // 厂家
      this.type = this.$route.params.type;         // 类型
      this.deviceSN = this.$route.params.deviceSN; // 设备SN
      this.moduleSN = this.$route.params.moduleSN; // 模组SN
      this.dizhi = this.streetNumber;
    },

    methods: {
      binding () {
        if (!this.agencyId) {
          this.Toast('未获取到运营商信息!');
          return false;
        }
        api.bindingDev({
          agencyId: this.agencyId,           // 代理商
          deviceId: '',                      // 设备id
          address: this.province + this.city + this.district + this.dizhi,             // 地址
          deviceStatus: 1,                   // 设备状态
          qrCode: '',                        // 二维码
          longitude: this.longitude,         // 经度
          latitude: this.latitude,           // 纬度
          altitude: this.altitude,           // 海拔
          errorTime: '',                     // 故障发生时间
          useTime: '',                       // 使用次数
          flags: '1',                        // 绑定标志 1绑定0解绑（此接口传1）
          sn: this.deviceSN,                 // 设备序列号
          deviceName: '',                    // 设备名称
          modelName: this.type,              // 	型号名
          moduleSerianum: this.moduleSN,     // 模组编码
          remark: this.remark                // 备注
        })
          .then(res => {
            this.Toast(res.resultDetail)
            this.isBinding = true;
          })
      },
      getLocation () {
      }
    },

    mounted () {
      if (this.streetNumber) return;
//      this.loadingStatus = true;
      const that = this;
      this.title('绑定设备');
      wx.ready(() => {
        wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            let latitude = that.latitude = res.latitude;     // 纬度，浮点数，范围为90 ~ -90
            let longitude = that.longitude = res.longitude;   // 经度，浮点数，范围为180 ~ -180。
            api.geocoderLocation({
              location: latitude + ',' + longitude
            })
              .then(res => {
                console.log(res);
                that.loadingStatus = false;
                that.address = res.data.data.result.address;
                that.$store.dispatch('updateAddress', { data: res.data.data.result });
                weui.toast('定位成功');
                that.dizhi = res.data.data.result.address_component.street + res.data.data.result.address_component.street_number;
                let lng = res.data.data.result.data.location.lng;
                let lat = res.data.data.result.data.location.lat;
                localStorage.setItem('latLng', JSON.stringify([lat, lng]));
              })
              .catch((err) => {
                console.log(err);
                that.loadingStatus = false;
                this.Toast('定位失败');
              })
          },
          fail: function () {
            that.loadingStatus = false;
            that.Toast('定位失败');
          }
        });
      })
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../../styles/agent/personal/bunding';
  .weui-cells:before {
    border: 0;
    height: 0;
  }
  .weui-cells:after {
    border: 0;
    height: 0;
  }
</style>

